<template>
    <div class="reg-exp">
        <div class="left">
            <h3>重要规则</h3>
            <p>中心规则：<code>/pattern/flags 其中 flags：i (大小写不敏感匹配)、g (全局匹配)</code></p>
            <p>需要转义的字符：<code>{ [ ( ) ] } \ | ^ $ ? * + .</code></p>
            <p>范围匹配：<code>[0-9]、[abc]、[a-zA-Z]</code></p>
            <p>精确匹配长度：<code>n* {0, }、n+ {1, }、n? {0, 1}、{n}</code></p>
            <p>预定义匹配：<code>\s 空格、\S 非空格、\d 数字、\D 非数字、\w [a-zA-Z_0-9] 单词字符、\W 非单词字符、\n 换行符、\r 回车符、\t 制表符、. 除回车换行外的所有字符</code></p>
            <p>边界匹配：<code>^ 开始符，在[]中表示非、$ 结束符、\b er\b 单词边界、\B er\B 非单词边界</code></p>
            <p>分组：<code>hehe{3} 与 (hehe){3} 区别、He(ll|ee)o 使用或、在表达式之外使用 $1-$9 匹配()中的值、在表达式之内用 \1 \2 \n 等匹配表达式第n个()中的内容 </code></p>
            <p>分组命名ES9：<code>(?&lt;name&gt;\d) 可以在表达式之外用 $&lt;name&gt; 获取，在exec的返回值中通过 res.groups.name 获取</code></p>
            <p>忽略分组：<code>(?:tom)-(ok) 这里 $1 指的就是 ok</code></p>
            <p>前瞻ES2018：<code>(?=XX) 后面必须有XX (?!XX)后面不能有XX</code></p>
            <p>后顾ES9：<code>(?&lt;=XX) 前面必须有XX (?&lt;!XX)前面不能有XX</code></p>
            <p>贪婪/非贪婪模式：<code>正常情况 \d{3,6} 会匹配6个 \d{3,6}? 会匹配3个</code></p>
            <p>优先级：<code>转义\ &gt; 括号 &gt; 字符或位置 &gt; 或|</code></p>
        </div>
        <div class="right">
            <div class="right-top">
                <h3>常用模版</h3>
                <div class="modelC">
                    <div class="modelItem">
                        <span>数字格式化：</span> /\B(?=(\d{3})+(?!\d))/g
                    </div>
                    <div class="modelItem">
                        <span>验证手机号：</span> /^1\d{10}$/
                    </div>
                    <div class="modelItem">
                        <span>验证密码：</span> /^[a-zA-Z]\w{5,17}$/
                    </div>
                    <div class="modelItem">
                        <span>验证邮箱：</span> /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
                    </div>
                    <div class="modelItem">
                        <span>验证中文：</span> /^[\u4E00-\u9FA5]+$/
                    </div>
                    <div class="modelItem">
                        <span>去掉HTML标签：</span> /&lt;\/?.+?&gt;/g
                    </div>
                </div>
            </div>
            <div class="right-bottom">
                <h3>演练区</h3>
                <h4>RegExp.prototype.test(str)</h4>
                <span>正则表达式：</span>
                <input type="text" v-model.lazy="testRegExp" style="width: 200px;" placeholder="输入双斜杠之间的内容">
                <span class="marginLeft">模式：</span>
                <input class="cursor" type="radio" name="mode" value="g" id="g" v-model="mode">
                <label class="cursor" for="g">g</label>
                <input class="cursor" type="radio" name="mode" value="i" id="i" v-model="mode">
                <label class="cursor" for="i">i</label>
                <span class="marginLeft">待检测字符串：</span>
                <input type="text" v-model="testString" placeholder="输入待检测字符串"><br/>
                <h4 style="display: inline-block;">正则检测结果：</h4>
                <span :class="testRes? 'green bold' : 'red bold'">{{testRes}}</span>

                <h4>String.prototype.replace(reg, str | num | function)</h4>
                <span>原字符串：</span>
                <input type="text" v-model.lazy="orgReplaceString" placeholder="输入原字符串">
                <span class="marginLeft">正则表达式：</span>
                <input type="text" v-model.lazy="replaceRegExp" style="width: 200px;" placeholder="输入双斜杠之间的内容">
                <span class="marginLeft">模式：</span>
                <input class="cursor" type="radio" name="mode1" value="g" id="g1" v-model="mode1">
                <label class="cursor" for="g1">g</label>
                <input class="cursor" type="radio" name="mode1" value="i" id="i1" v-model="mode1">
                <label class="cursor" for="i1">i</label>
                <span class="marginLeft">替换成：</span>
                <input type="text" v-model="afterReplaceRegExp" style="width: 60px;" placeholder="字符等">
                <h4 style="display: inline-block;">替换后结果：</h4>
                <span class="green bold">{{replaceRes}}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            testRegExp: '',
            mode: 'g',
            testString: '',

            orgReplaceString: '',
            replaceRegExp: '',
            mode1: 'g',
            afterReplaceRegExp: ''
        }
    },
    computed: {
        testRes(){
            if (this.testRegExp == '\\') return
            if (this.testString == '') return
            let regExp = new RegExp(this.testRegExp, this.mode)
            let result = regExp.test(this.testString)
            return result
        },
        replaceRes(){
            if (this.replaceRegExp == '\\') return
            if (this.afterReplaceRegExp == '') return
            let regExp = new RegExp(this.replaceRegExp, this.mode1)
            let result = this.orgReplaceString.replace(regExp, this.afterReplaceRegExp)
            return result
        }
    },
}
</script>

<style lang="less" scoped>
@import '../css/common.less';
.reg-exp{
    display: flex;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: left;
    .left{
        flex: 3;
        border: 4px dashed @green;
        margin-right: 10px;
        padding: 10px;
        p{
            margin: 12px 0;
            code{
                color: @red;
            }
        }
    }
    .right{
        flex: 7;
        display: flex;
        flex-direction: column;
        .right-top{
            flex: 1;
            border: 4px dashed @blue;
            padding: 10px;
            .modelC{
                display: flex;
                width: 100%;
                flex-wrap: wrap;
                overflow-y: scroll;
                .modelItem{
                    width: 50%;
                    padding: 5px 0;
                }
            }
        }
        .right-bottom{
            flex: 2;
            border: 4px dashed @red;
            margin-top: 10px;
            padding: 10px;
        }
    }
}
</style>
